<template>
    <div>

        <div style="margin-bottom:5px;">
            <el-input v-model="name" placeholder="请输入科室" style="width:200px;" @keyup.enter.native="loadPost"></el-input>
            <el-button type="primary" style="margin-left:5px;" @click="loadPost">查询</el-button>
            <el-button type="success" @click="resetParam">重置</el-button>
            <el-button type="primary" @click="add">新增</el-button>

        </div>
        <el-table :data="tableData"
            :header-cell-style="{background: '#f3f6fd',color:'#555'}">
            <el-table-column prop="id" label="科室编码" width="120">
            </el-table-column>
            <el-table-column prop="name" label="科室名称" width="200">
            </el-table-column>
            <el-table-column prop="operate" label="操作">
                <template slot-scope="scope">
                    <el-button size="small" type="primary" @click="work(scope.row)">排班</el-button>
                    <el-button size="small" type="success" @click="mod(scope.row)">编辑</el-button>
                    <el-popconfirm title="确定删除" @confirm="del(scope.row.id)" style="margin-left:5px;">
                        <el-button slot="reference" size="small" type="danger">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[2, 5, 10, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">

        </el-pagination>



        <el-dialog
            title="提示"
            :visible.sync="centerDialogVisible"
            width="30%"
            center>
            <el-form ref="form" :rules="rules" :model="form" label-width="80px">
                <el-form-item label="科室" prop="name">
                    <el-col :span="20">
                        <el-input v-model="form.name"></el-input>
                    </el-col>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 动态加载弹窗组件排班 -->
        <el-dialog :visible.sync="dialogVisible" width="90%">
            <component :is="currentComponent" :item="dialogItem"></component>
            <span slot="footer">
                <el-button @click="closeWork">关闭</el-button>
            </span>
        </el-dialog>


    </div>
</template>

<script>
import ApiService from "@/apiService";
import DoctorWork from '@/components/Doctor/DoctorWork.vue';
export default {
    name: 'Department',
    components: {
        DoctorWork,
    },
    data() {
        return {
            tableData: [],
            pageSize:20,
            pageNum:1,
            total:0,
            departmentId:'',
            name:'',
            centerDialogVisible:false,
            form:{
                name:'',
                id:'',
            },
            works:[],
            rules:{
                name:[
                    {required:true,message:'请输入科室名称',trigger:'blur'},
                ],
            },
            dialogVisible: false, // 控制弹窗是否显示
            currentComponent: '', // 动态组件名称
            dialogItem: {}, // 需要传递给弹窗组件的数据

        }
    },

    methods:{
        work(row){
            console.log(row.id);
            this.dialogVisible = true;
            this.currentComponent = 'DoctorWork'; // 设置要渲染的组件
            this.dialogItem = { departmentId:  row.id}; // 传递给弹窗组件的数据
        },
        closeWork(){
            this.dialogVisible = false;
            this.currentComponent = ''; // 设置要渲染的组件
        },
        add(){
            this.centerDialogVisible = true
            this.$nextTick(()=>{
                this.resetForm()
                this.form.id = ''})
        },

        mod(row){
            this.centerDialogVisible = true
            this.$nextTick(()=>{
                this.form.id = row.id
                this.form.name = row.name
            })
        },

        save(){
            this.$refs.form.validate((valid)=>{
                if(valid){
                    this.saveOrUpdate();
                }else{
                    console.log('error submit!!')
                    return false;
                }
            });

            
        },

        async saveOrUpdate(){
            const response = await ApiService.post('/department/saveOrUpdate', this.form);
            if(response.code===200){
                this.$message({message:"成功",type:'success'})
                this.centerDialogVisible = false
                this.loadPost()
            }else{
                this.$message({message:"失败",type:'error'})
            }
        },
        //删除功能
        async del(id){
            const response = await ApiService.get('/department/del?id='+id);
            if(response.code===200){
                this.$message({message:"成功",type:'success'})
                this.loadPost()
            }else{
                this.$message({message:"失败",type:'error'})
            }
        },


        resetForm(){
            this.$refs.form.resetFields();
        },

        handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageNum=1
        this.pageSize=val
        this.loadPost()
        },
        handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pageNum=val
        this.loadPost()
        },

        resetParam(){
            this.name='';
        },

        async loadPost(){
            const response = await ApiService.post('/department/listPage', {
                pageSize:this.pageSize,
                pageNum:this.pageNum,
                param:{
                    name:this.name,
                }
            });

            if(response.code===200){
                this.tableData=response.data
                this.total=response.total
            }else{
                alert('获取数据失败')
            }
        }
    },


    beforeMount(){
       // this.loadGet()
        this.loadPost()
    }
    

  
}
</script>


<style scoped>

</style>
